import React from 'react';
import './App.css';

// Day 1
import Fb from './Day1/Fb';
import HelloWorld from './Day1/HelloWorld';
import HelloWorldFn from './Day1/HelloWorldFn';
import NumberList from './Day1/NumberList';
import Input from './Day1/Input';

// Day 2
import Constructor from './Day2/Constructor';
import FetchUser from './Day2/FetchUser';
import FetchUserBtn from './Day2/FetchUserBtn';
import Form from './Day2/Form';
import FormHoc from './Day2/FormHoc';
import windowWidthHoc from './Day2/WindowWidthHoc';
import Calc from './Day2/Calc';

//Day3
import Function from './Day3/Function';
import FunctionState from './Day3/FunctionState';
import Context from './Day3/Context';
import Clock from './Day3/Clock';
import TimerHook from './Day3/TimerHook';
import Reducer from './Day3/Reducer';
import Callback from './Day3/Callback';

const menus = [
  {
    title: 'Hello World',
    Component: HelloWorld,
    groupTitle: 'Day1',
  },
  {
    title: 'Hello World Fn',
    Component: HelloWorldFn,
  },
  {
    title: 'Number List',
    Component: NumberList,
  },
  {
    title: 'Fb',
    Component: Fb,
  },
  {
    title: 'Input',
    Component: Input,
  },
  {
    groupTitle: 'Day 2',
    title: 'Constructor',
    Component: Constructor,
  },
  {
    title: 'Fetch User',
    Component: FetchUser,
  },
  {
    title: 'Fetch User Button',
    Component: FetchUserBtn,
  },
  {
    title: 'Form',
    Component: windowWidthHoc(Form), // 高阶组件包裹
  },
  {
    title: 'Form Hoc',
    Component: () => (
      <FormHoc title="HHHHH" btnText="用户登录2" defaultUsername="Hoc 初始值" />
    ),
  },
  {
    title: 'Calc',
    Component: Calc,
  },
  {
    groupTitle: 'Day 3',
    title: 'Function',
    Component: Function,
  },
  {
    title: 'FunctionState',
    Component: FunctionState,
  },
  {
    title: 'Context',
    Component: Context,
  },
  {
    title: 'Clock',
    Component: Clock,
  },
  {
    title: 'TimerHook',
    Component: TimerHook,
  },
  {
    title: 'Reducer',
    Component: Reducer,
  },
  {
    title: 'Callback',
    Component: Callback,
  },
];

class App extends React.Component {
  state = {
    menuIndex: 0,
  };

  componentDidMount() {
    const menuIndex = Number(window.location.hash.substring(1));
    this.setState({ menuIndex });

    setInterval(() => {
    this.forceUpdate();
    }, 1000);
  }

  onMenuChange = menuIndex => {
    this.setState({ menuIndex });
    window.location.hash = menuIndex;
  };

  render() {
    const { menuIndex } = this.state;
    const {  Component } = menus[menuIndex];
    return (
      <div className="app">
        <div className="menu">
          <ul>
            {menus.map((menu, index) => {
              const isCurrent = index === menuIndex;
              const groupTitle = menu.groupTitle;
              return (
                <li
                  className={isCurrent ? 'active' : ''}
                  onClick={() => this.onMenuChange(index)}
                  key={index}
                >
                  {groupTitle && <h2>{groupTitle}</h2>}
                  {menu.title}
                </li>
              );
            })}
          </ul>
        </div>
        <div className="main">
          <Component />
        </div>
      </div>
    );
  }
}

export default App;
